// publish/index.html ========>>>>>>>>
.app-refresh {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1001;
    padding: 0 18px;
    overflow: hidden;
    line-height: 52px;
    background: #000;
    transition: all 0.3s ease;

    .app-refresh-wrap {
        display: flex;
        font-size: 15px;
        color: #fff;

        label {
            flex: 1;
        }

        span {
            cursor: pointer;

            & + span {
                margin-left: 10px;
            }
        }
    }

    .app-refresh-show {
        height: 52px;
    }
}

// publish/index.html <<<<<<<<========

// app.vue ========>>>>>>>>
.slide-left-enter-active,
.slide-right-enter-active {
    animation: slide-left-enter 0.3s ease;
}

.slide-left-leave-active,
.slide-right-leave-active {
    animation: slide-left-leave 0.3s ease;
}

@keyframes slide-left-enter {
    0% {
        opacity: 0;
        transform: translate3d(0, 100px, 0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
@keyframes slide-left-leave {
    0% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    100% {
        opacity: 0;
        transform: translate3d(100px, 0, 0);
    }
}

.app-view {
    transition: all 0.3s ease;
}

// .slide-left-enter,
// .slide-right-enter {
//     opacity: 1;
//     transform: translate3d(0, 100px, 0);
// }
// .slide-right-leave-active,
// .slide-left-leave-active {
//     opacity: 0;
//     transform: translate3d(100px, 0, 0);
// }

@media (max-width: 540px) {
    .slide-left-enter-active,
    .slide-left-leave-active,
    .slide-right-enter-active,
    .slide-right-leave-active {
        transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
    }

    .slide-left-enter {
        transform: translate(100%, 0);
    }

    .slide-right-enter {
        transform: translate(-100%, 0);
    }

    .slide-right-leave-active {
        transform: translate(100%, 0);
    }

    .slide-left-leave-active {
        transform: translate(-100%, 0);
    }
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to {
    opacity: 0.5;
}

// app.vue <<<<<<<<========

// about.vue ========>>>>>>>>
.flex-item {
    display: flex;
    margin-bottom: 10px;

    .flex-label {
        width: 70px;
    }
}

// about.vue <<<<<<<<========

// app.vue ---> back-top.vue ========>>>>>>>>
.back-top {
    position: fixed;
    bottom: 10%;
    left: 50%;
    width: 30px;
    height: 65px;
    margin-left: 520px;
    transition: all 0.3s ease;

    @media (min-width: 1440px) and (max-width: 1920px) {
        margin-left: 720px;
    }
    @media (min-width: 1280px) and (max-width: 1439px) {
        margin-left: 620px;
    }
    @media (min-width: 1001px) and (max-width: 1279px) {
        margin-left: 520px;
    }

    a {
        display: block;
        width: 100%;
        height: 100%;
        background-image: url('@/assets/images/back-top.png');
        background-size: cover;
    }
}

// .back-top {
//     transition: all 0.3s ease;
//     position: fixed;
//     left: 50%;
//     bottom: 10%;
//     width: 35px;
//     height: 35px;
//     margin-left: 520px;
//     a {
//         display: block;
//         width: 100%;
//         height: 100%;
//         background-image: url('@/assets/images/back-top-1.png');
//         background-size: cover;
//         &:hover {
//             background-image: url('@/assets/images/back-top-2.png');
//         }
//     }
// }
// app.vue ---> back-top.vue <<<<<<<<========

// loading-spinner.vue ========>>>>>>>>
.spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10099;
    width: 90px;
    height: 90px;
    margin: -125px 0 0 -45px;
    text-align: center;
    animation: rotate 2s infinite linear;

    .dot1,
    .dot2 {
        position: absolute;
        top: 0;
        display: inline-block;
        width: 60%;
        height: 60%;
        background-color: #67cf22;
        border-radius: 100%;
        animation: bounce 2s infinite ease-in-out;
    }

    .dot2 {
        top: auto;
        bottom: 0;
        animation-delay: -1s;
    }
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}
@keyframes bounce {
    0%,
    100% {
        transform: scale(0);
    }

    50% {
        transform: scale(1);
    }
}

// loading-spinner.vue <<<<<<<<========
